
<template>
	<view class="s-back recharge">
        <view class="flex" :style="{
			paddingTop:statusbarHeight + 12 +'px'
		}">
			<view class="text1">
				<uni-icons type="back" size="25" @click="goBack" color="#fff"></uni-icons>
			
			</view>
			<view class="flex1">任务中心</view>
			<view class="right" style="visibility: hidden;">恢复订阅</view>		
        </view>

		<view class="recharge-back">
			<view class="recharge-text1">对话余额<text class="recharge-text2">{{ form.residue_degree }}</text>{{ unit }}</view>
			<view class="recharge-text1" style="font-size: 24rpx;margin-top: 8px;color: #666;">每日登录站点，自动赠送<text class="recharge-text2" style="font-size: 30rpx;">{{ form.dz_number }}</text>{{ unit }}，明天记得登录哦   </view>

		</view>
		

		
		

		<view class="block1">
			<view class="recharge-title">
				<text class="text-1">每日任务<text class="text-2">免费获得条数</text></text>
			</view>
			<view v-for="(item,idx) in task" class="task">
				<view class="left">
					
					 <uni-icons :type="item.icon" size="60" color="#7CD887"></uni-icons>

					<view class="color">
						<view class="title">{{ item.name }}</view>
						<view class="desc">每{{ item.name }}1人奖励<text class="red">{{ item.number }}</text>{{ unit }},每日限<text class="red">{{ item.up_limit }}</text>人</view>
						<view class="pro">进度 {{ item.day_val }}/{{ item.up_limit}}</view>
					</view>

				</view>
				<view @tap="handle(idx)" class="btn" :style="{
					background:item.day_val==item.up_limit?'#333':'',
					color:item.day_val==item.up_limit?'#666':'#fff'
				}">去{{ item.name }}</view>
			</view>


		

		</view>

	


	</view>
</template>

<script>
import payMethod from '@/utils/pay'
	export default {
		name:"subscribe",
    components:{},
		data() {
			return {
				num:0,
				task:[],
				form:{},
				unit:'',
            }
		},
		onLoad(opts) {
			
			this.statusbarHeight = uni.getStorageSync('statusBarHeight')
			this.unit = uni.getStorageSync('unit')
		},
		mounted() {
			
			this.getData()
		},
		beforeDestroy(){
			
		},
		destroyed() {
			
		},
		
		computed:{
			
		},
		methods: {
			handle(idx){
				if(this.task[idx].day_val!=this.task[idx].up_limit){
					// #ifdef H5
					var ua = window.navigator.userAgent.toLowerCase();
					let val = ua.match(/MicroMessenger/i) == 'micromessenger'
					if(val){
						this.$u.toast('请点击右上角...分享')
					}else{
						this.$u.toast('请到公众号菜单打开链接，点击右上角...分享')
					}
					// #endif
				}	

			},
			async getData(){
				const r = await this.$u.api.userTask()
				if(r){
					this.form = r.data
					if(this.form.invite.status==1){
						this.task.push({
							id:1,
							name:'邀请',
							icon:'personadd',
							number:this.form.invite.number,
							up_limit:this.form.invite.up_limit,
							day_val:this.form.invite.day_invite,
						})
					}
					// #ifdef MP-WEIXIN
					
				
					if(this.form.share.status==1){
						this.task.push({
							id:1,
							name:'分享',
							icon:'redo',
							number:this.form.share.number,
							up_limit:this.form.share.up_limit,
							day_val:this.form.share.day_share,
						})
					}
						// #endif

					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.recharge{
	.recharge-title{
		padding: 22px 14px;
		color: #fff;
		
		
		.text-1{
			font-size: 20px;
		}
		.text-2{
			margin-left: 10px;
			font-size: 14px;
			color: #bebebe;
		}
	}
	.recharge-text1{
		color: #fff;
		
		font-size: 18px;
	}
	.recharge-text2{
		color:rgb(247, 119, 119);
		font-size: 24px;
		margin:0 4px;
	}
	.recharge-back{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		width: 100%;
		height: 180px;
		background: #75CCD1;
	}
	.flex{
		padding:24rpx;
		display: flex;
		color: #fff;
	}
	.text1{
		width: 130rpx;
	}
	.flex1{
		display: flex;
		justify-content: center;
		flex: 1;
		font-size: 36rpx;
	}
	.right{
		color: #828694;
		font-size: 32rpx;
	}
	.blo2{
		display: flex;
		justify-content: center;
		padding: 20rpx;
		color:#828694;
	}
	.blo3{
		margin:0 20rpx;
		font-size: 24rpx;
		color:#828694;
	}
	.blo4{
		display: inline-flex;
		align-items: center;
		background: #2A2C3A;
		padding: 10rpx;
		border-radius: 60rpx;
		margin-left: 30rpx;
	}
	.block1{
		white-space: wrap;
		overflow-x: auto;
		border-radius: 20px;
	
		background: #272734;
		margin: -40px 14px 0;
		padding:0 14px;
	}
	.blo5{
		padding: 40rpx;
	}
	.lin1{
		color: #C4BBA6;
		font-size: 40rpx;
		font-weight: 800;
		margin:40rpx 0 16rpx;
	}
	.lin2{
		color: #C4BBA6;
		font-size: 30rpx;

	}
	.item1{
		margin-bottom: 30rpx;
	}
	.blo6{
		background: #2A2C3A;
		margin:0rpx 24rpx 24rpx;
		border-radius: 20rpx;
		padding: 30rpx 24rpx 10rpx;
	}
	.text1{
		font-size: 36rpx;
		color:#fff;
		margin-bottom: 30rpx;
		white-space: nowrap;
	}
	.text2{
		font-size: 28rpx;
		color:#828694;
	}
	.blo7{
		padding: 0rpx 0 20rpx;
		position: relative;
		display: inline-flex;
		margin-right: 30rpx;
	}
	.boxx1{
		display: inline-flex;
		background-image: linear-gradient(#F2DF90, #ECC291);
		width: calc((100vw - 72px)/2);
		border-radius: 30rpx;
		padding: 30rpx 0rpx;
		color: #000;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-size: 36rpx;
			font-weight: 500;
		}
		.price1{
			margin:0 20rpx;
			font-size: 60rpx;
			color: #D4372E;
		}
		.orginal1{
			text-decoration:line-through;
			color: #937353;
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.per1{
			color: #D4372E;
			font-size: 28rpx;
		}
	}
	.boxx2{
		width: calc((100vw - 72px)/2);
		display: inline-flex;
		background: #1E2037 !important;
		border: 1px solid #292E49 !important;
		padding: 30rpx 0rpx;
		border-radius: 30rpx;
		color: #fff;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-size: 36rpx;
			font-weight: 500;
		}
		.price1{
			margin:0 20rpx;
			font-size: 60rpx;
			color: #EAC78F;
		}
		.orginal1{
			text-decoration:line-through;
			color: #9396A0;
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.per1{
			color: #9396A0;
			font-size: 28rpx;
		}
	}
	.top1{
		position: absolute;
		background:#E74F3A ;
		color: #fff;
		top: 0;
		left: 20rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-style: italic;
			font-weight: 600;
		}
		.time1{
			font-size: 34rpx;
		}
		
	}
	.bgap{
		width: 100%;
		height: 220rpx;
	}
	.bottom{
		background: #151828;
		bottom: 0;
		position: fixed;
		width: 100%;
		
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		padding: 24rpx;
		padding-bottom: 50rpx;
		.btn{
			border-radius: 50rpx;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding:30rpx;
			color:#000;
			font-size: 40rpx;
			font-weight: 500;
			text-align: center;
			
		}
		
	}
	.block2{
		padding: 30rpx 24rpx;
		.first{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
		}
		.bar{
			width: 8rpx;
			height: 50rpx;
			background-image: linear-gradient(to top, #83D2EA,#79CDED);
			border-radius: 4rpx;
		}
		.title{
			font-size: 40rpx;
			color: #fff;
			margin-left: 30rpx;
		}
		.item2{
			padding: 30rpx 30rpx 0;
		}
		.line1{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 16rpx 0;
			border-bottom: 1px solid #272734;
			color: #fff;
			.name1{
				font-size: 34rpx;
				margin:0 20rpx;

			}
			.tit1{
				padding: 8rpx 20rpx;
				background: #0F0D0D;
				border-radius: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.title1{
					font-size: 30rpx;
					color: #F6D98F;
			}	
			}
			

		}
		.content1{
			padding: 20rpx 0;
			color: #A6A7B9;
			font-size: 30rpx;
			line-height: 50rpx;
			white-space: pre-wrap;
		}
	}
	.pop1{
		width: 600rpx;
		border: 1px solid #39353C;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-image: linear-gradient(to right, #F4D4AF,#F4E9D5);
		
		.hu1{
			position:absolute;
			background: #2F313F;
			left: -20%;
			width: 140%;
			height: 600rpx;
			top: -300rpx;
			border-radius: 50%;
		}
		.posi1{
			
			top:0;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			
			.line7{
				font-size: 30rpx;
				display: inline-flex;
				padding: 14rpx 28rpx;
				color: #CC997F;
			background: #18181F;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			margin-bottom: 50rpx;
			}
			.line8{
				font-size: 40rpx;
				color: #F9EFAF;
				margin:4rpx 0;
				text-align: center;
			}
		}
		.mt50{
			margin-top: 260rpx;
			height: 300rpx;
		}
		.line9{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			padding: 20rpx 0;
			color: #fff;
			font-size: 34rpx;
			.btn8{
				
				background: #EDC596;
				border-radius: 80rpx;
				border:1px solid #fff;
				padding: 20rpx 40rpx;
				margin-right: 30rpx;
			}
			.btn9{
				background-image: linear-gradient(to bottom, #E7B266,#ff8432);
		
				border-radius: 80rpx;
				border:1px solid #fff;
				padding: 20rpx 40rpx;
			}
		}
	}
	
}
@media screen and (min-width: 700px) {
	.btn{
		width: 660px;
	}
	.boxx1{
		width: 200px !important;
	}
	
}
.edit11{
		background:rgba(#151520, 0.9);
		padding: 20px;
		
		.center{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		font-size: 20px;
		}
		.cell{
			padding:10px 0;
			font-size: 16px;
			display: flex;
			border-bottom: 1px solid #1f1f2f;
			.left{
				display: inline-block;
				width: 70px;
				
				text-align: right;
				color: #a4a4a4;

			}
			.right{
				margin-left: 4px;
				color:#fff;
			}

		}
		.bottom{
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			width: 300px;
			.btn8{
				width: 130px;
				height: 36px;
				// background: #EDC596;
				border-radius: 80rpx;
				border:1px solid #7CD887;
				display: flex;
				justify-content: center;
				align-items: center;
			
				margin-right: 30rpx;
			}
			.btn9{
				width: 130px;
				height: 36px;
				// background-image: linear-gradient(to bottom, #E7B266,#ff8432);
				background-image: linear-gradient(to top, #7CD887,#75CCD1);
		
		
				border-radius: 80rpx;
				// border:1px solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
	}
	.line1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 20px 0;
	}
	.task{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.btn{
			border-radius: 50rpx;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding:14rpx 24rpx;
			color:#000;
			font-size: 24rpx;
			font-weight: 500;
			white-space: nowrap;
			text-align: center;
		}
		.left{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}
		.color{
			color: #fff;
			margin-left: 8px;
		}
		.title{
			font-size: 36rpx;
			font-weight: 500;
		}
		.desc{
			margin-top: 6px;
			color: #999;
			font-size: 28rpx;
		}
		.red{
			color: #f77777;
			font-size: 34rpx;
			font-weight: 500;
		}
		.pro{
			color: #75CCD1;
			margin:8px 0 30px;
		}
	}
</style>
